import React, { Component } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import DashLine from '@/common/dashLine';
import { px2dp } from '@/styles';
import { msg } from '@/common';
import {
  iconLeftWhite,
  orderRight,
  iconRefuse,
  iconBackOff,
  iconPayWhite
} from '@/images';
import oil from '@/api/oil';

export default class FictitiousOilCardOrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      orderDetails: {},
    };
  }

  componentDidMount() {
    const { navigation } = this.props;
    const state = navigation.state || {};
    const params = state.params || {};
    const { cardData } = params;
    this.getPumpDetailById(cardData.id);
  }

  // 1 待拨油 | 2 已拨油 | 3 已拒绝 | 4 已回退
  titleItem = {
    1: { icon: iconPayWhite, text: '待拨油' },
    2: { icon: orderRight, text: '已拨油' },
    3: { icon: iconRefuse, text: '已拒绝' },
    4: { icon: iconBackOff, text: '已回退' }
  }

  render() {
    const { orderDetails } = this.state;
    let oilCardItem = this.renderOilCardItem();
    return (
      <View style={styles.container}>
        {
          orderDetails && (
            <View>
              <LinearGradient
                start={{ x: 0.0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={['rgba(229,184,103,1)', 'rgba(187,147,75,1) 100%)', ]}
                style={{ width: '100%', height: 160, }}
              >
                <TouchableOpacity
                  style={styles.backDot}
                  onPress={() => msg.emit('router: back')}
                >
                  <Image
                    style={styles.backImg}
                    resizeMode='stretch'
                    source={iconLeftWhite}
                  />
                </TouchableOpacity>
                <View style={styles.center}>
                  {
                    orderDetails.status && (
                      <View style={styles.btnWrap}>
                        <Image
                          source={this.titleItem[orderDetails.status.value].icon}
                          style={styles.image}
                        />
                        <Text style={styles.btnTextStyle}>
                          {this.titleItem[orderDetails.status.value].text}
                        </Text>
                      </View>
                    )
                  }

                </View>
              </LinearGradient>
              <View style={styles.main}>
                <Text style={[styles.f18, styles.bBlack]}>订单明细</Text>
                <View style={styles.orderLine} />
                {
                  Object.keys(oilCardItem).map(key => {
                    if (oilCardItem[key]) {
                      return (
                        <View style={[styles.flexB]}>
                          <Text style={{ color: '#666564', fontSize: px2dp(26) }}>{key}</Text>
                          <Text style={{ color: '#666564', fontSize: px2dp(26) }}>{oilCardItem[key]}</Text>
                        </View>
                      );
                    }
                  })
                }
                <View style={{ marginVertical: px2dp(20) }}>
                  <DashLine />
                </View>
                <View style={styles.flexB}>
                  <Text style={{ color: '#333232', fontSize: px2dp(28) }}>拨油额度：</Text>
                  <Text>
                    <Text style={{ color: '#333232', fontSize: px2dp(24) }}>¥</Text>
                    <Text style={{ color: '#333232', fontSize: px2dp(40) }}>{orderDetails.oilPumpAmount}</Text>
                  </Text>
                </View>
              </View>
            </View>
          )
        }
      </View>
    );
  }

  renderOilCardItem = () => {
    const { orderDetails } = this.state;
    const {
      legalName = '',
      allianceName = '',
      carNo = '',
      oilPumpNo = '',
      createTime = '',
      status = {},
      updateTime = '',
      rejectReason = ''
    } = orderDetails;
    return {
      物流公司: legalName,
      商户名称: allianceName,
      车牌号: carNo,
      订单编号: oilPumpNo,
      下单时间: createTime,
      拨油时间: status.value == 2 ? updateTime : '',
      拒绝时间: status.value == 3 ? updateTime : '',
      拒绝理由: status.value == 3 ? rejectReason : ''
    };
  }

  getPumpDetailById = (id) => {
    oil.getPumpDetailById({ id }).then(res => {
      if (res.success) {
        this.setState({ orderDetails: res.data });
      } else {
        msg.emit('app:tip', { text: '未知错误' });
        // msg.emit('router: back');
      }
    });
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent:'center',
    // alignItems:'center',
    backgroundColor: '#F5F4F2',
    height: '100%',
    // alignItems:'center',
  },
  Text: {
    color: '#999796'
  },
  f18: {
    fontSize: px2dp(18) * 2
  },
  active: {
    color: '#FE8C19'
  },
  bBlack: {
    color: '#333232'
  },
  bGray: {
    color: '#999796'
  },
  center: {
    alignItems: 'center'
  },
  flexB: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: px2dp(40) * 2
  },
  bWhite: {
    backgroundColor: '#fff'
  },
  white: {
    color: '#fff'
  },
  btnStyle: {
    width: px2dp(80) * 2,
    height: px2dp(30) * 2,
    borderRadius: 4,
    borderWidth: px2dp(1),
    borderColor: 'transparent',
    alignItems: 'center',
    justifyContent: 'center',

  },
  image: {
    width: px2dp(18) * 2,
    height: px2dp(18) * 2
  },
  borderC: {
    borderColor: '#CCCAC8',
  },
  main: {
    // maxWidth:350,
    margin: px2dp(16) * 2,
    borderRadius: px2dp(12) * 2,
    backgroundColor: '#fff',
    marginTop: -30,
    padding: px2dp(12) * 2
  },
  itemFlexB: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: px2dp(16) * 2
    // alignItems:'center'
  },
  item: {
    borderRadius: 12,
    backgroundColor: '#FFF',
    marginBottom: px2dp(12) * 2,
    marginLeft: px2dp(12) * 2,
    marginRight: px2dp(12) * 2,
    padding: px2dp(12) * 2
  },
  mt12: {
    marginTop: px2dp(12) * 2
  },
  modalViewStyle: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
  },
  footer: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  backDot: {
    width: px2dp(66) * 2,
    height: px2dp(66) * 2,
    padding: px2dp(20) * 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backImg: {
    width: px2dp(26) * 2,
    height: px2dp(26) * 2,
  },
  btnTextStyle: {
    fontSize: px2dp(20) * 2,
    color: '#fff',
    marginLeft: px2dp(8) * 2
  },
  btnWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  orderLine: {
    height: 1,
    backgroundColor: '#E6E3E1',
    marginTop: px2dp(16) * 2,
    marginBottom: px2dp(16) * 2
  },
  jdWrapStyle: {
    marginTop: 1,
    margin: px2dp(16) * 2,
    borderRadius: px2dp(12) * 2,
    backgroundColor: '#fff'
  },
  jdInner: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  jdIcon: {
    marginRight: px2dp(2) * 2,
    width: px2dp(36) * 2,
    height: px2dp(22) * 2
  }
});
